<template>
  <div>
    <center>欢迎光临</center>
    <table border="1" align="center">
      <thead>
        <tr>
          <th>
            {{ name }} {{ price }} ¥ / 斤，折扣 &lt; {{ discount }} 折 &gt;
          </th>
        </tr>
      </thead>
      <tbody align="center">
        <tr>
          <td>
            请输入你要购买的斤数
            <input v-model="count" type="number" value="0" />
          </td>
        </tr>
        <tr>
          <td><button @click="handleClick">结账买单</button></td>
        </tr>
        <tr>
          <td>
            【结账单】总价：{{ totalPrice }}¥，折后价：{{
              discountPrice
            }}¥，省了：{{ reduce }}¥
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Gsgd',
  data() {
    return {
      name: '苹果',
      price: 10, // 单价
      totalPrice: 0, // 总价
      count: 0, // 数量
      discount: 8, // 折扣
      discountPrice: 0, // 折后价
      reduce: 0, // 节省
    }
  },
  methods: {
    handleClick() {
      // 总价 = 单价 * 数量
      this.totalPrice = this.price * this.count
      // 折扣价 = 单价 * 折扣 * 数量
      this.discountPrice = this.price * (this.discount / 10) * this.count
      // 节省 = 总价 - 折扣价
      this.reduce = this.totalPrice - this.discountPrice
    },
  },
}
</script>

<style lang="less" scoped></style>
